<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyq
 * @LastEditTime: 2021-09-22 18:03:33
-->
<template>
  <div ref="root" style="height: 130px"></div>
</template>

<script>
import { Pie } from "@antv/g2plot";
import { ref, onMounted } from 'vue';
export default {
  setup() {
    let root = ref(null);
    let pie = null;
    const data = [
      { type: "分类一", value: 27 },
      { type: "分类二", value: 25 },
      { type: "分类三", value: 18 },
      { type: "分类四", value: 15 },
      { type: "分类五", value: 10 },
      { type: "其他", value: 5 },
    ];
    let initCharts = () => {
      pie = new Pie(root.value, {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        label: {
          type: "outer",
          content: "{name} {percentage}",
        },
        interactions: [
          { type: "pie-legend-active" },
          { type: "element-active" },
        ],
      });
      // 渲染
      pie.render();
    };
    onMounted(initCharts);
    return {
      root,
    };
  },
};
</script>